<template>
  <div class="login-wrap">
    <div class="logo">
      <img src="../../assets/images/logo.png" height="32">
    </div>
    <div class="login-content-wrap">
      <div class="login-circle circle" />
      <div class="login-circle circle1" />
      <div class="login-circle circle2" />
      <div class="login-circle circle3" />
      <div class="login-pic" />
      <div class="login-content">
        <div class="login-header">
          用户登录
        </div>
        <div class="login-form">
          <dynamics-form
            ref="formRef"
            layout="labelTop"
            :model="formModel"
            :setting="settings"
          >
            <template #verifyCode>
              <u-row flex :gutter="12">
                <u-col :span="12">
                  <u-form-item
                    prop="verifyCode"
                    in-form-item
                    :rules="[
                      {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'change'
                      }
                    ]"
                  >
                    <u-input
                      v-model="formModel.verifyCode"
                      placeholder="请输入验证码"
                    />
                  </u-form-item>
                </u-col>
                <u-col :span="12">
                  <u-form-item
                    prop=""
                    in-form-item
                  >
                    <img
                      class="verify-code"
                      v-if="formModel.captcha"
                      :src="'data:image/jpg;base64,' + formModel.captcha"
                      alt="验证码"
                      @click="getCaptcha"
                    >
                    <u-icon
                      type="refresh-right"
                      class="verify-refresh"
                      @click="getCaptcha"
                      title="点击刷新验证码"
                    />
                  </u-form-item>
                </u-col>
              </u-row>
            </template>
            <u-form-item>
              <u-button type="primary" block @click="handleSubmit">
                登录
              </u-button>
            </u-form-item>
          </dynamics-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
// 后面统一走后台登录，这里只是调试时使用
import { getCaptchaApi } from '@api/permission'
import { DynamicsForm, libs, message } from '@bairong/vix'

const { md5 } = libs.tools

export default {
  name: 'Login',
  components: { DynamicsForm },
  setup() {
    const formRef = ref(null)
    const formModel = reactive({
      userName: '',
      password: '',
      verifyCode: '',
      captcha: '',
      sessionid: ''
    })
    const settings = [
      {
        name: 'userName',
        label: '用户姓名',
        type: 'input',
        props: { placeholder: '请输入用户姓名' },
        rules: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }]
      },
      {
        name: 'password',
        label: '密码',
        type: 'input',
        props: { type: 'password', placeholder: '请输入密码' },
        rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      {
        name: 'verifyCode',
        label: '验证码',
        type: 'slot',
        slot: 'verifyCode',
        props: { placeholder: '请输入验证码' },
        rules: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    ]
    const loading = ref(false)
    const store = useStore()
    const router = useRouter()

    const getCaptcha = () => {
      getCaptchaApi().then(data => {
        formModel.captcha = data.captcha
        formModel.sessionid = data.sessionid
      })
    }

    const handleSubmit = () => {
      formRef.value.validate().then(() => {
        loading.value = true
        const {
          userName,
          password,
          verifyCode,
          sessionid
        } = formModel
        const params = {
          username: userName,
          password: md5(md5(userName + md5(password)) + verifyCode),
          captcha: verifyCode,
          sessionid
        }
        // 调用store的登录动作
        store
          .dispatch('login', params)
          .then(() => {
            // 跳转到首页
            router.push({ path: '/polocy/atlas' })
            loading.value = false
          })
          .catch(err => {
            // 登录错误 刷新验证码 记录错误次数
            loading.value = false
            getCaptcha()
            store.dispatch('setPasswordWrong')
            message.error(err)
          })
      })
    }

    onMounted(() => {
      getCaptcha()
    })

    return {
      formRef,
      formModel,
      settings,
      loading,
      getCaptcha,
      handleSubmit
    }
  }
}
</script>

<style lang="less">
.login-wrap {
  background-image: url('../../assets/images/login-bg.png');
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  min-height: 600px;
  min-width: 1280px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #344f94;
  overflow: hidden;

  .logo {
    position: absolute;
    top: 20px;
    left: 20px;
  }

  .login-content-wrap {
    position: absolute;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    .login-circle {
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      &.circle {
        background-image: url('../../assets/images/circle/circle.png');
        height: 457px;
        left: 40px;
        top: -16px;
        width: 502px;
      }
      &.circle1 {
        background-image: url('../../assets/images/circle/circle1.png');
        height: 893px;
        left: -14%;
        top: -42%;
        width: 926px;
        animation: a 48s linear infinite;
      }
      &.circle2 {
        background-image: url('../../assets/images/circle/circle2.png');
        height: 767px;
        left: -88px;
        top: -150px;
        width: 765px;
        animation: b 40s linear infinite;
      }
      &.circle3 {
        background-image: url('../../assets/images/circle/circle3.png');
        height: 622px;
        left: -16px;
        top: -75px;
        width: 616px;
        animation: a 32s linear infinite;
      }
    }
    .login-pic {
      width: 615px;
      height: 497px;
      color: #fff;
      font-size: 24px;
    }
    .login-content {
      position: absolute;
      display: inline-block;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      padding: 10px 40px 40px;
      width: 360px;
      background-color: #d2e6f2;
      border-radius: 4px;

      .login-header {
        padding: 20px 0 20px;
        font-size: 20px;
        font-weight: 400;
        text-align: left;
        color: #000;
      }

      .verify-code {
        width: 110px;
        cursor: pointer;
      }

      .verify-refresh {
        display: inline-block;
        margin-left: 4px;
        cursor: pointer;
      }
    }
  }
}

@keyframes a {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes b {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-90deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
  }
  75% {
    -webkit-transform: rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
</style>
